VSCode 使用教程 ​

下载和安装 ​

• 访问官网下载页面，选择指定系统版本的文件下载

• 运行以下命令进行安装

# xxx.deb 为刚下载的文件路径，如文件下载到 /opt
cd /opt
sodo apt-get install ./xxx.deb

• 检查是否安装成功

基本配置 ​

打开设置，进行相关基本设置，如字体，主题等

插件安装 ​

打开设置>扩展 或直接快捷键 Ctrl+Shift+X (mac 下为 ⇧⌘X ) ,搜索插件名称，点击安装即可。

VSCode的实用性在于众多丰富的插件，以下是一些常用的前端开发插件推荐：

• Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code：中文化处理插件

• Prettier：代码格式化工具，保持代码风格一致。

• ESLint: JavaScript 代码规范检查工具

• Auto Close Tag：自动闭合 HTML/XML 标签。

• Auto Rename Tag：修改标签时自动修改对应的标签。

• Path Intellisense：自动提示文件路径的插件。

• Code Spell Checker: 提供拼写检查功能，防止在代码中出现拼写错误。

• Live Server：提供简单的、实时的服务器，支持在本地编辑时自动刷新页面。

• GitLens：增强 VSCode 内置的 Git 支持，提供更强大的 Git 操作功能。看个人使用习惯，本人更倾向于用 sourcetree 软件管理。

• indent-rainbow：在代码缩进处显示彩虹色条，使得不同层级的缩进在编辑器中以不同颜色的竖线来表示，这有助于开发人员更容易地看到代码的缩进程度。

• Better Comment: 帮助在代码中创建更人性化的注释，可以把你的注释分类为：警报、查询、待办事项、突出，不同注释可以显示不同的效果。

PS ：使用不同语言开发的时候也会有对应的插件可提高开发效率。这里暂不列出

快捷键配置 ​

根据个人使用习惯配置。常用快捷键要记一下，有利于提升开发效率。

• Windows：快捷键大全

• macOS：快捷键大全

Code 快捷命令 ​

• 打开 VSCode，按下 Ctrl + Shift + P 打开命令面板。

• 输入shell command，选择Shell Command: Install 'code' command in PATH并按下Enter。

• 重新启动终端，输入code即可启动 VSCode。

# 用 vscode 打开当前目录
code .
# 用 vscode 打开 /code 目录
code /code

创建项目 ​

• 创建或导入项目(当前例子中项目为空目录)

• 分别新建 index.html、index.css、index.js 文件

• 进行代码编写，运行

eg： index.html

输入 html 插件会自动提示代码模板，选择 html:5,按下 Enter 键

就会自动生成相应的模板代码，如下图所示：